<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-row>
          <el-button type="primary" @click="addForm = true">新增</el-button>
          <el-button type="primary" @click="toUpdate">修改</el-button>
          <el-button type="primary" @click="toDel">删除</el-button>
          <el-button type="primary" @click="toQue">查询</el-button>
        </el-row>
      </div>
      <el-table
        :data="treeData"
        style="width: 100%; margin-bottom: 20px"
        row-key="deptId"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="deptName" label="部门名称" width="180">
        </el-table-column>
        <el-table-column prop="leader" label="负责人" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="新增" :visible.sync="addForm">
      <el-form :model="add">
        <el-form-item label="部门名称" :label-width="formWidth">
          <el-input v-model="add.deptName" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="部门负责人" :label-width="formWidth">
          <el-input v-model="add.leader" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父节点" :label-width="formWidth">
          <treeselect
            v-model="add.parentId"
            disable
            :options="treeData"
            placeholder="功能组菜单"
            :normalizer="normalizer"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addForm = false">取 消</el-button>
        <el-button type="primary" @click="toAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible="updateForm">
      <el-form :model="currentRow">
        <el-form-item label="部门名称" :label-width="formWidth">
          <el-input v-model="currentRow.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父节点" :label-width="formWidth">
          <treeselect
            v-model="currentRow.parentId"
            disable
            :options="treeData"
            placeholder="功能组菜单"
            :normalizer="normalizer"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateForm = false">取 消</el-button>
        <el-button type="primary" @click="updateU">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeptPages,
  addDept,
  updateDept,
  deleteDept,
  deptTree,
} from "@/api/manage/dept";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    components: {
    Treeselect,
  },
  data() {
    return {
      // 分页相关
      total: 0,
      // 查询条件,分页数据
      searchData: {
        pageNum: 1, // 当前页
        pageSize: 20, // 页面大小
      },
      tableData: null,
      addForm: false,
      updateForm: false,
      formWidth: "120px",
      add: {},
      currentRow: {},
      treeData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      console.log(this.searchData);
      deptTree().then((res) => {
        console.log(res);
        this.treeData = res.data;
      });
    },
        normalizer(node) {
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    toAdd() {
      addDept(this.add).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.addForm = false;
          this.init();
        } else {
          this.$message(res.msg);
        }
      });
    },
    toUpdate() {
      if (this.currentRow == null) {
        this.$message.error("请选择要修改的部门");
      } else {
        this.updateForm = true;
      }
    },
    updateU() {
      updateDept(this.currentRow.groupId, this.currentRow).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.updateForm = false;
          this.init();
        } else {
          this.$message(res.msg);
        }
      });
    },

    toDel() {
      if (this.currentRow == null) {
        this.$message.error("请选择要删除的用户");
      }
      deleteDept(this.currentRow.groupId).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.init();
        } else {
          this.$message(res.msg);
        }
      });
    },
    toQue() {
      this.$message("查询");
      //关键字查询。。。分页查询
    },
    //选择：
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchData.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchData.pageNum = val;
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

